<template>
    <div class="search-area-wrap zModifyElem">
        <div class="el-form-wrap">
            <!-- 展开搜索 -->
            <el-row v-if="type === 'expaned'">
                <template v-for="(item, index) in formList">
                    <el-col
                        v-if="item.show !== false && (index < config.limitNum || isExpaned)"
                        :key="index"
                        :span="item.span || uniteSpan"
                    >
                        <!-- 遍历formList -->
                        <div class="rule-item">
                            <label
                                :class="['item-label', 'text-' + labelPosition]"
                                :style="calculateLabelWidth(item.labeWidth)"
                            >
                                {{ item.label || '未设置' }}
                            </label>
                            <div class="item-content">
                                <el-input
                                    v-if="item.type === 'input'"
                                    v-model="item.value"
                                    clearable
                                    :placeholder="item.placeholder || '请输入'"
                                    @input="itemValChange($event, item)"
                                ></el-input>
                                <el-select
                                    v-if="item.type === 'select'"
                                    v-model="item.value"
                                    clearable
                                    filterable
                                    :multiple="item.config.multiple"
                                    :placeholder="item.placeholder || '请选择'"
                                    @change="itemValChange($event, item)"
                                >
                                    <el-option
                                        v-for="(v, i) in item.option"
                                        :key="i"
                                        :value="v[item.config.value || 'value']"
                                        :label="v[item.config.label || 'label']"
                                    ></el-option
                                ></el-select>
                                <el-date-picker
                                    v-if="item.type === 'date'"
                                    v-model="item.value"
                                    type="date"
                                    :picker-options="
                                        item.isFutureTimeLimit === false ? {} : pickerOptions
                                    "
                                    :placeholder="item.placeholder || '选择日期'"
                                    @change="itemValChange($event, item)"
                                >
                                </el-date-picker>
                                <el-date-picker
                                    v-if="item.type === 'daterange'"
                                    v-model="item.value"
                                    type="daterange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :picker-options="
                                        item.isFutureTimeLimit === false ? {} : pickerOptions
                                    "
                                    :placeholder="item.placeholder || '选择日期'"
                                    @change="itemValChange($event, item)"
                                >
                                </el-date-picker>
                                <el-date-picker
                                    v-if="item.type === 'datetimerange'"
                                    v-model="item.value"
                                    type="datetimerange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :picker-options="
                                        item.isFutureTimeLimit === false ? {} : pickerOptions
                                    "
                                    :placeholder="item.placeholder || '选择日期'"
                                    @change="itemValChange($event, item)"
                                >
                                </el-date-picker>
                                <!-- type===datetimerange -->

                                <!-- type=== slot -->
                                <slot v-if="item.type === 'slot'" :name="item.slot">{{
                                    '请检查slot是否不一致:' + item.slot
                                }}</slot>
                                <!-- type=== slot end -->
                            </div>
                        </div>

                        <!-- 遍历formList end -->
                    </el-col>
                </template>
                <el-col
                    :span="buttonSpan"
                    :offset="getButtonOffset()"
                    class="button-wrap"
                    :style="totalSpan + buttonSpan > 24 ? '' : 'text-align:left'"
                >
                    <!-- 操作按钮在一行可以排满，则左对齐，否则右对齐 -->
                    <!-- 最右侧的按钮 -->
                    <!-- <el-form-item class="clearfloat"> -->
                    <div
                        class="operating-btns"
                        :style="
                            totalSpan + buttonSpan > 24
                                ? 'justify-content: flex-end'
                                : 'ustify-content: flex-start'
                        "
                    >
                        <div v-if="itemList.length >= config.limitNum">
                            <el-button
                                @click="isExpaned = !isExpaned"
                                type="text"
                                style="color: #b8b8b8; text-align: left"
                                >{{ isExpaned ? '收起' : '展开' }}
                                <i
                                    :class="[
                                        isExpaned ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                                        'el-icon--right',
                                    ]"
                                />
                            </el-button>
                        </div>
                        <div>
                            <!-- 自定义按钮插槽 -->
                            <el-button
                                v-if="resetShow"
                                size="small"
                                class="btn-reset"
                                type="text"
                                icon="el-icon-refresh"
                                @click="handleReset"
                                >重置</el-button
                            >
                            <el-button
                                type="primary"
                                size="small"
                                @click="handleSearch"
                                :icon="mainButton == '查询' ? 'el-icon-search' : ''"
                                >{{ mainButton }}</el-button
                            >
                            <slot name="customButton"></slot>
                        </div>
                    </div>
                    <!-- </el-form-item> -->
                    <!-- 最右侧的按钮 end -->
                </el-col>
            </el-row>
            <!-- 展开搜索 end-->

            <!-- 单行搜索 -->
            <el-row v-if="type === 'inline'" class="search-inline">
                <template v-for="(item, index) in formList">
                    <div
                        class="rule-item inline-item"
                        :key="index"
                        :style="calculateItemWidth(item.span || uniteSpan)"
                    >
                        <label class="item-label">
                            {{ item.label || '未设置' }}
                        </label>
                        <div class="item-content">
                            <el-input
                                v-if="item.type === 'input'"
                                v-model="item.value"
                                clearable
                                :placeholder="item.placeholder || '请输入'"
                                @input="itemValChange($event, item)"
                            ></el-input>
                            <el-select
                                v-if="item.type === 'select'"
                                v-model="item.value"
                                clearable
                                filterable
                                :multiple="item.config.multiple"
                                :placeholder="item.placeholder || '请选择'"
                                @change="itemValChange($event, item)"
                            >
                                <el-option
                                    v-for="(v, i) in item.option"
                                    :key="i"
                                    :value="v[item.config.value || 'value']"
                                    :label="v[item.config.label || 'label']"
                                ></el-option
                            ></el-select>
                            <el-date-picker
                                v-if="item.type === 'date'"
                                v-model="item.value"
                                type="date"
                                :picker-options="
                                    item.isFutureTimeLimit === false ? {} : pickerOptions
                                "
                                :placeholder="item.placeholder || '选择日期'"
                                @change="itemValChange($event, item)"
                            >
                            </el-date-picker>
                            <el-date-picker
                                v-if="item.type === 'daterange'"
                                v-model="item.value"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                :picker-options="
                                    item.isFutureTimeLimit === false ? {} : pickerOptions
                                "
                                :placeholder="item.placeholder || '选择日期'"
                                @change="itemValChange($event, item)"
                            >
                            </el-date-picker>
                            <el-date-picker
                                v-if="item.type === 'datetimerange'"
                                v-model="item.value"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                :picker-options="
                                    item.isFutureTimeLimit === false ? {} : pickerOptions
                                "
                                :placeholder="item.placeholder || '选择日期'"
                                @change="itemValChange($event, item)"
                            >
                            </el-date-picker>
                            <!-- type===datetimerange -->

                            <!-- type=== slot -->
                            <slot v-if="item.type === 'slot'" :name="item.slot">{{
                                '请检查slot是否不一致:' + item.slot
                            }}</slot>
                            <!-- type=== slot end -->
                        </div>
                    </div>
                </template>
                <div class="operating-btns">
                    <!-- 自定义按钮插槽 -->
                    <el-button
                        v-if="resetShow"
                        size="small"
                        class="btn-reset"
                        type="text"
                        icon="el-icon-refresh"
                        @click="handleReset"
                        >重置</el-button
                    >
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleSearch"
                        :icon="mainButton == '查询' ? 'el-icon-search' : ''"
                        >{{ mainButton }}</el-button
                    >
                    <slot name="customButton"></slot>
                </div>
            </el-row>
            <!-- 单行搜索 end-->

            <!-- 单个搜索 -->
            <el-row v-if="type === 'singleSearch'" class="search-inline">
                <div style="flex: 0 0 150px">
                    <el-select v-model="singleKey" @change="singleKeyChange" style="width: 96%">
                        <el-option
                            v-for="item in singleOption"
                            :key="item.key"
                            :label="item.label"
                            :value="item.key"
                        ></el-option>
                    </el-select>
                </div>
                <div
                    class="item-content"
                    :style="calculateItemWidth(currentRule.span || uniteSpan)"
                >
                    <el-input
                        v-if="currentRule.type === 'input'"
                        v-model="currentRule.value"
                        clearable
                        :placeholder="currentRule.placeholder || '请输入'"
                        @input="itemValChange($event, item)"
                    ></el-input>
                    <el-select
                        v-if="currentRule.type === 'select'"
                        v-model="currentRule.value"
                        clearable
                        filterable
                        :multiple="currentRule.config.multiple"
                        :placeholder="currentRule.placeholder || '请选择'"
                        @change="itemValChange($event, item)"
                    >
                        <el-option
                            v-for="(v, i) in currentRule.option"
                            :key="i"
                            :value="v[currentRule.config.value || 'value']"
                            :label="v[currentRule.config.label || 'label']"
                        ></el-option
                    ></el-select>
                    <el-date-picker
                        v-if="currentRule.type === 'date'"
                        v-model="currentRule.value"
                        type="date"
                        :picker-options="
                            currentRule.isFutureTimeLimit === false ? {} : pickerOptions
                        "
                        :placeholder="currentRule.placeholder || '选择日期'"
                        @change="itemValChange($event, item)"
                    >
                    </el-date-picker>
                    <el-date-picker
                        v-if="currentRule.type === 'daterange'"
                        v-model="currentRule.value"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        :picker-options="
                            currentRule.isFutureTimeLimit === false ? {} : pickerOptions
                        "
                        :placeholder="currentRule.placeholder || '选择日期'"
                        @change="itemValChange($event, item)"
                    >
                    </el-date-picker>
                    <el-date-picker
                        v-if="currentRule.type === 'datetimerange'"
                        v-model="currentRule.value"
                        type="datetimerange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        :picker-options="
                            currentRule.isFutureTimeLimit === false ? {} : pickerOptions
                        "
                        :placeholder="currentRule.placeholder || '选择日期'"
                        @change="itemValChange($event, item)"
                    >
                    </el-date-picker>
                    <!-- type===datetimerange -->

                    <!-- type=== slot -->
                    <slot v-if="currentRule.type === 'slot'" :name="currentRule.slot">{{
                        '请检查slot是否不一致:' + currentRule.slot
                    }}</slot>
                    <!-- type=== slot end -->
                </div>
                <div class="operating-btns">
                    <!-- 自定义按钮插槽 -->
                    <el-button
                        v-if="resetShow"
                        size="small"
                        class="btn-reset"
                        type="text"
                        icon="el-icon-refresh"
                        @click="handleReset"
                        >重置</el-button
                    >
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleSearch"
                        :icon="mainButton == '查询' ? 'el-icon-search' : ''"
                        >{{ mainButton }}</el-button
                    >
                    <slot name="customButton"></slot>
                </div>
            </el-row>
            <!-- 单个搜索 end-->
        </div>
    </div>
</template>
<script>
import utils from '../../../packages/src/util/util'
export default {
  name: 'zSearchForm',
  props: {
    // 搜索栏类型 expaned/singleSearch/inline
    type: {
      type: String,
      default: 'expaned'
    },
    itemList: Array, //  { type: 'input', label: '企业名称', placeholder: '请输入企业名称', key: '企业名称', value: null,span:null }, 到时会根据key 值组成{key,value}对象返回给父组件
    // span表示占多少布局空间
    uniteSpan: {
      type: Number,
      default: 6
    },
    // 如果是筛选条件的长度很不规则，可以调整 itemList的sapn和 buttonSpan来实现
    buttonSpan: {
      type: Number,
      default: 6
    },
    // 是否需要重置按钮
    resetShow: {
      type: Boolean,
      default: false
    },
    // 主按钮名字
    mainButton: {
      type: String,
      default: '查询'
    },
    // label对齐方式
    labelPosition: {
      type: String,
      default: 'right'
    },
    // label间距
    labelWidth: {
      type: String,
      default: '100px'
    },
    config: {
      type: Object,
      default: () => {
        return {
          limitNum: 10// 第几个以后的筛选条件隐藏
        }
      }
    }
  },
  data () {
    return {
      formList: [],
      isExpaned: true,
      totalSpan: 0,
      //   单条件查询
      singleKey: '',
      currentRule: {},
      singleOption: [],
      //   search-area-wrap容器的宽度
      bodyWidth: null,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
        }
      }
    }
  },
  mounted () {
    if (this.type !== 'expaned') {
      /*
        当type为inline/singleSearch时，所有元素通过flex布局靠右对齐，每个元素的宽度由span控制
        参考calculateItemWidth方法 
      */
      let el = document.querySelector('.search-area-wrap')
      this.bodyWidth = el.offsetWidth
    }
    this.formList = utils.deepClone(this.itemList)
    this.formList.forEach((x) => {
      if (x.show !== false) {
        this.totalSpan += x.span || this.uniteSpan
        this.singleOption.push({ key: x.key, label: x.label })
      }
    })
    if (this.type === 'singleSearch') {
      this.singleKey = this.formList[ 0 ].key
      this.currentRule = this.formList[ 0 ]
    }
  },
  methods: {
    itemValChange (val, item) {
      this.$emit('itemValChange', val, item)
    },
    singleKeyChange () {
      // 选择筛选条件
      this.currentRule = this.formList.find(x => x.key === this.singleKey)
      this.currentRule.value = null
    },
    getButtonOffset () {

      // 当前断点下的按钮长度
      let bSpan = this.buttonSpan
      if (this.totalSpan + bSpan > 24) {
        if (this.formList.length === 0) {
          return
        }

        let totalSpan = 24
        this.formList.forEach((item, index) => {
          // 隐藏项未展开时排除多余部分
          if (!(item.show !== false && (index <= this.config.limitNum - 1 || this.isExpaned))) {
            // console.log("已隐藏：" + index)
            return
          }
          // 当前筛选框长度
          let span = item.span || this.uniteSpan
          if (totalSpan - span < 0) {
            totalSpan = 24
          }
          totalSpan -= span
        })
        if (totalSpan - bSpan >= 0) {
          return totalSpan - bSpan
        }
        return 24 - bSpan
      } else {
        return 0
      }

    },
    handleSearch () {
      let data = {}
      //   单个查询值传回当期的值
      if (this.type === 'singleSearch') {
        data[ this.currentRule.key ] = this.currentRule.value
      } else {
        this.formList.forEach((item) => {
          if (item.show === false) {
            data[ item.key ] = ''
          } else {
            data[ item.key ] = item.value
          }
        })
      }

      this.$emit('handleSearch', data)
    },
    handleReset () {
      if (this.type === 'singleSearch') {
        this.currentRule.value = null
      } else {
        this.formList.forEach((item) => {
          item.value = ''
        })
        this.formList.splice(0, 0)
      }
      this.$emit('handleReset')
    },
    calculateItemWidth (span) {
      let flex = this.bodyWidth * span / 24 + 'px'
      return { flex: `0 0 ${flex}` }
    },
    calculateLabelWidth (labelWidth) {
      let width = labelWidth || this.labelWidth || '120px'
      return { flex: `0 0 ${width}` }
    }
  },
}
</script>
<style lang="scss" scoped>
.search-area-wrap {
    .el-form-wrap {
        border-radius: 4px;
        padding-right: 15px;
    }
    .button-wrap {
        text-align: right;
        ::v-deep.btn-reset {
            color: #0850ae;
        }
        ::v-deep .el-button--default {
            box-sizing: border-box;
        }
    }
    .rule-item {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .item-label {
        padding: 0 5px 0 10px;
        font-size: 14px;
        color: #606266;
        text-align: right;
    }
    .text-left {
        text-align: left;
    }
    .text-center {
        text-align: center;
    }
    .item-content {
        flex: 1;
        & > div {
            width: 100%;
        }
    }
    .operating-btns {
        padding-left: 10px;
        display: flex;
        align-items: flex-start;
    }
    .search-inline {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex-wrap: wrap;
    }
}
</style>

<style lang="scss">
.zModifyElem {
    // 表格样式
    .el-table {
        .el-table__cell {
            padding: 0;
            font-size: 12px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 500;
            height: 34px;
        }

        th.el-table__cell {
            background: #f0f6ff;
        }

        td.el-table__cell {
            color: #666;
        }
    }

    // 表格样式 end

    // 按钮样式
    .el-button--small {
        padding: 8px 15px;
    }

    // 按钮样式 end

    // 输入框Input样式
    .el-input__inner {
        height: 30px;
        line-height: 30px;
    }

    .el-input {
        .el-input__icon {
            line-height: 30px;
        }
    }

    // 输入框Input样式 end

    // 日期选择样式
    .el-date-editor {
        .el-input__icon {
            line-height: 30px;
        }
    }

    .el-range-editor.el-input__inner {
        padding: 0 10px;
    }

    .el-range-separator.el-range-separator {
        line-height: 28px;
    }

    // 日期选择样式 end
}
</style>